<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件处理</title>
  <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="demo">
  <h1>绑定监听</h1>
  <button @click="test1">test1</button>
  <button @click="test2('ywh')">test2</button>
  <button @click="test3">test3</button>
  <button @click="test4(123,$event)">test4</button>
  <h1>事件修饰符</h1>
<div style="width: 200px;height: 200px;background-color: red" @click="test5">
<!--  停止事件冒泡-->
<div style="width: 100px;height: 100px;background-color: blue" @click.stop="test6">
</div>
</div>
<!--  停止事件的默认行为-->
  <a href="http://www.baidu.com/" @click.prevent="test7">去百度</a>
  <h1>按键修饰符</h1>
  <input type="text" @keyup.enter="test8">
</div>
<script type="text/javascript">
  const vm = new Vue({
    el: '#demo',
    data: {
      test1(){
        alert('test1');
      },
      test2(msg){
        alert('test2---' + msg);
      },
      test3(event){
        alert('test3---' + event.target.innerHTML);
      },
      test4(val,event){
        alert('test3---' +val +'---'+ event.target.innerHTML);
      },
      test5() {
        alert('out')
      },
      test6() {
        alert('inner')
      },
      test7() {
        alert('点击了')
      },
      test8(event) {
          alert(event.target.value);
      }
    }
  });
</script>
</body>
</html>